<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>
<div id="root">

</div>


<script type="text/javascript">

  /*
  * 1.一个重要的关系【图片：一条重要的原型链.png】:VueComponent.prototype.__proto__ === Vue.prototype
  * 2.为什么有这个关系：为了让组件实例对象能访问到Vue原型上的属性和方法
  *
  *
  * */

  //第一步,创建组件
  const student = Vue.extend({
    template: `
      <div>
        <h2>学生姓名:{{ name }}</h2>
        <h2>学生年龄:{{ age }}</h2>
        <button @click="showXXX">点我查看原型对象上的xxx</button>
      </div>
    `,
    data() {
      return {
        name: '张三',
        age: '29'
      }
    },
    methods:{
      showXXX(){
        console.log(this.xxx);
      }
    }

  });

  //第二步注册局部组件
  var vm = new Vue({
    el: '#root',
    template:`<student></student>`,
    components: {
      student
    }
  });

  //vm.__proto__.xxx = '998998';
  Vue.prototype.xxx = '890890';

</script>
</body>
</html>
